<template>
  <div class="page my-page">
    <div class="page-bg"></div>
    <nav-bar theme="white" :left-arrow="false" :fixed="false" setting></nav-bar>
    <div class="my-home">
      <van-image round fit="cover" width="1.65333rem" height="1.65333rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      <div class="my-home-info">
        <p class="name">{{ personalInfo.gridPersonName }}</p>
        <p class="label van-ellipsis">
          <span>{{ personalInfo.gridPersonTypeName }}</span>
          <template v-if="personalInfo.gridName">
            <span>&nbsp;|&nbsp;</span>
            <span>{{ personalInfo.gridName }}</span>
          </template>
        </p>
      </div>
      <div class="my-home-enter">
        <span @click="$router.push('/my/personal')"><van-icon name="arrow" size="12" /></span>
      </div>
    </div>
    <!--    <div class="my-task">-->
    <!--      <van-row :gutter="8">-->
    <!--        <van-col span="8" v-for="(item, key) in entryBar" align="center" :key="key">-->
    <!--          <div class="my-task-item" align="left">-->
    <!--            <img :src="item.iconPath" alt="" />-->
    <!--            <p class="text">{{ item.text }}</p>-->
    <!--            <p class="text-number">-->
    <!--              {{ item.number }}-->
    <!--            </p>-->
    <!--          </div>-->
    <!--        </van-col>-->
    <!--      </van-row>-->
    <!--    </div>-->
    <div class="my-list">
      <div>
        <van-cell
          v-for="(item, key) in gridPerson"
          :key="key"
          @click="$router.push(item.path)"
          size="large"
          title-class="title-margin"
          :icon="item.iconPath"
          :title="item.text"
          is-link
          :border="false"
        ></van-cell>
      </div>
    </div>
  </div>
</template>
<script>
import My from '@/api/my'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      entryBar: [
        {
          text: '待处置任务',
          iconPath: require('@/assets/images/my/my_wait@2x.png'),
          number: 8
        },
        {
          text: '处置中任务',
          iconPath: require('@/assets/images/my/my_conduct@2x.png'),
          number: 8
        },
        {
          text: '已处置任务',
          iconPath: require('@/assets/images/my/my_complete@2x.png'),
          number: 8
        }
      ],
      gridPerson: [
        {
          text: '事件记录',
          iconPath: require('@/assets/images/my/my_Event log@2x.png'),
          path: '/event/record'
        },
        {
          text: '基础信息记录',
          iconPath: require('@/assets/images/my/my_info record@2x.png'),
          path: '/resident/record?recordType=1'
        },
        {
          text: '日志记录',
          iconPath: require('@/assets/images/my/my_diary@2x.png'),
          path: '/routine/log'
        },
        {
          text: '绩效考核',
          iconPath: require('@/assets/images/my/my_record@2x.png'),
          path: '/routine/appraisal'
        },
        {
          text: '意见建议',
          iconPath: require('@/assets/images/my/my_opinion@2x.png'),
          path: '/my/opinion'
        }
      ],
      manageTabBar: [
        {
          text: '意见建议',
          iconPath: require('@/assets/images/my/my_opinion@2x.png'),
          path: '/my/opinion'
        },
        {
          text: '任务记录',
          iconPath: require('@/assets/images/my/my_diary@2x.png'),
          path: '/my/task'
        }
      ],
      personalInfo: {}
    }
  },
  created() {
    this.getPersonalInfo()
    if (this.user.gridPersonType === '5') this.gridPerson = this.manageTabBar
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  methods: {
    // 个人信息
    getPersonalInfo() {
      My.Personal.detail().then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.personalInfo = res.data.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/my/index.less';
</style>
